<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>聊天室</title>
        <link rel="stylesheet" href="../public/css/bootstrap.min.css">
        <style>
            html{
                height: 100%;
            }
            *{
                margin:0;
                padding:0;
                list-style: none;
                box-sizing: border-box;
            }
            .input1{
                width: 90%;
                outline:none;
                border:1px solid #ccc;
                position: fixed;
                left: 0px;
                bottom: 0px;
                height: 40px;
            }
            .input2{
                width: 90%;
                outline:none;
                border:1px solid #ccc;
                position: fixed;
                left: 0px;
                bottom: 0px;
                height: 100px;
            }
            .button1{
                width: 10%;
                position: fixed;
                right: 0px;
                bottom: 0px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background-color: #ccc;
                border:1px solid #ccc;
                cursor: pointer;
            }
            .button2{
                width: 10%;
                position: fixed;
                right: 0px;
                bottom: 0px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                background-color: #ccc;
                border:1px solid #ccc;
                cursor: pointer;
            }
            h1{
                text-align: center;
            }
            .mydiv{
                padding: 10px;
                /* width: 100%; */
                height: 100%;
                /* border: 1px solid #ccc; */
                overflow-y: scroll;
                background-color: rgba(183, 250, 247, 0.8);
            }
            /* #mydiv::-webkit-scrollbar{      display:none    } */
            .mgpd{
                margin:0;
                padding:0;
            }
            .mydiv1{
                padding: 10px;
                height: 100%;
                /* border: 1px solid #ccc; */
                overflow-y: scroll;
                background-color: rgba(183, 250, 247, 0.8);
            }
            .mydiv1::-webkit-scrollbar{      display:none    }
        </style>
    </head>
    <!--  -->
    <body style="background-image: url(../public/img/sky.png) ;background-size:100%;height: 100%;">
        <div class="col-lg-12 mgpd" style="height: 100%;">
            <div class="col-lg-12">
                <h1 class="col-lg-6 col-lg-offset-3">欢迎 <span id="names" style="color: #ccc;"><%= user %></span> 来到聊天室<a href="http://localhost:3000/" style="font-size:20px">返回</a></h1>
            </div>
            <div class="col-lg-12" style="height: 70%;">
                <div id='mydiv' class="col-lg-6 col-lg-offset-2 col-md-8 col-md-offset-1 mydiv">
                    <ul id='myul' class="">
                        
                    </ul>
                </div>
                <div class="col-lg-2 col-md-2 mydiv1" style="background-color: rgba(116, 194, 190, 0.8);">
                    <ul id="mydiv1">
                        <li>在线人数: <span style='color: red'>0</span></li>
                        <li></li>                        
                    </ul> 
                    <ul id='mydiv2'></ul>
                </div>
                
            </div>
            
            <input type="text" class="input1">
            <div id="button" class="button1">发送</div>
        </div>
        
        
        <script src="../public/js/jquery.js"></script>
        <script src="socket.io/socket.io.js"></script>
        <script>
            var socket = io();
            var myuid=$('#names').html()
            socket.emit('login',{uid:myuid})
            $('#button').click(function(){
                //发送数据
                socket.emit('chat',{info:$('input').val(),uid:myuid})
                $('input').val('')
            })
            $('input').keydown((e)=>{
                if(e.keyCode==13){
                    socket.emit('chat',{info:$('input').val(),uid:myuid})
                    $('input').val('')
                }
            })
            //接收数据
            socket.on('send',(msg)=>{
                console.log(msg)
                var tag=$(`<li style='color:blue'>${msg.uid}:&nbsp;&nbsp;${mytimes(msg.time)}</li><li>&nbsp;&nbsp;&nbsp;&nbsp;${msg.msg}</li>`)
                $('#myul').append(tag)
                $('#mtdiv').scrollTop($('ul').height())
            })
            socket.on('login',(msg)=>{
                $('#mydiv1>li>span').html(msg.len)
                $('#mydiv1>li:eq(1)').html(`欢迎${msg.uid}进入聊天室`)
                $('#mydiv2').empty()
                for(var i in msg.user){
                    $('#mydiv2').append(`<li>${i}</li>`)
                }
            })
            socket.on('exit',(msg)=>{
                $('#mydiv1>li>span').html(msg.len)
                $('#mydiv1>li:eq(1)').html(`${msg.uid}退出了聊天室`)
                $('#mydiv2').empty()
                for(var i in msg.user){
                    $('#mydiv2').append(`<li>${i}</li>`)
                }
            })
            window.onbeforeunload = function(){
                socket.emit('exit',{uid:$('#names').html()})
            }
            window.onunload = function(){
                socket.emit('exit',{uid:$('#names').html()})
            }
            function mytimes(time){//处理时间
                var year=new Date(time).getFullYear();
                var month=new Date(time).getMonth()+1;
                var day=new Date(time).getDate();
                var hours=new Date(time).getHours();
                var min=new Date(time).getMinutes();
                var ss=new Date(time).getSeconds();
                hours<10?hours="0"+hours:hours;
                min<10?min="0"+min:min;
                ss<10?ss="0"+ss:ss;
                return `${year}/${month}/${day} ${hours}:${min}:${ss}` 
            }
            $('input').on('focus',function(){
                $(this).addClass('input2').removeClass('input1')
                $('#button').addClass('button2').removeClass('button1')
            })
            $('#button').on('click',function(){
                $('input').addClass('input1').removeClass('input2')
                $(this).addClass('button1').removeClass('button2')
            })
        </script>
    </body>
</html>